var MaterialSetting = function () {
  var MaterialSettingItem = function () {
    var template = /* html */ `
      <div class="material-setting-item">
        <template v-if="columns!==null">
          <div class="material-setting-item-line" :class="{'has-print':isPrint}"></div>
          <div class="material-setting-item-content">
            <div class="material-setting-item-title" v-if="materialConfig.isGroup">{{config.classifyName}}</div>
            <div class="material-setting-item-table">
              <el-table fit border ref="materialTable" :data="materialData" style="width:100%" :style="tableStyle" :cell-class-name="setCellClassName"
                @header-dragend="headerDragend">
                <template v-for="columnObj in config.columns">
                <el-table-column :resizable="!isPrint" :label="columnObj.label" :column-key="columnObj.key" :key="columnObj.key" :min-width="columnObj.width"
                  header-align="center" :align="columnObj.align">
                  <template slot-scope="scope" v-if="data.mode!=='test'">
                    <show-textarea v-if="columnObj.id==='remark'" autosize v-model="scope.row.remark" :readonly="isPrint" :text-style="cellStyle"></show-textarea>
                    <span v-else :style="cellStyle">{{getMaterialFieldData(scope.row,columnObj)}}</span>
                  </template>
                </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </template>
      </div>
    `;

    return {
      props: {
        config: {
          type: Object,
          required: true
        },
        materialConfig: {
          type: Object,
          required: true
        },
        data: Object,
        isPrint: {
          type: Boolean,
          default: false
        },
        isEmphasize: {
          type: Boolean,
          default: false
        }
      },

      computed: {
        columns: function () {
          return this.config.columns;
        },
        materialData: function () {
          var isGroup = this.materialConfig.isGroup;
          return this.data.getMaterialData(this.config, isGroup);
        },
        tableStyle: function () {
          var materialConfig = this.materialConfig;
          var minHeight = materialConfig.minHeight;
          if (materialConfig.isGroup) {
            minHeight -= 30;
          }
          return {
            minHeight: minHeight + 'px'
          };
        },
        cellStyle: function () {
          var materialConfig = this.materialConfig;
          return {
            lineHeight: materialConfig.lineHeight + 'px',
            fontSize: materialConfig.fontSize + 'px'
          };
        }
      },

      data: function () {
        return {};
      },

      methods: {
        getMaterialFieldData: function (classifyData, columnObj) {
          return classifyData.getClassifyData(columnObj);
        },

        headerDragend: function (newWidth, oldWidth, column) {
          var columnKey = column.columnKey;
          return this.materialConfig.resetWidth(columnKey, newWidth, oldWidth);
        },

        checkValid: function () {
          var columns = this.columns;
          if (columns === null) {
            return true;
          }

          var materialTable = this.$refs['materialTable'];
          var tableWidth = $(materialTable.$el).find('.el-table__header-wrapper table').width() + 1;
          var totalWidth = $(this.$el).width();
          if (tableWidth > totalWidth) {
            if (this.materialConfig.isGroup) {
              var classifyName = this.config.classifyName;
              this.$alert(`物料设置中，分类'${classifyName}'的表格有横向滚动条`);
            } else {
              this.$alert('物料设置中，表格有横向滚动条');
            }
            return false;
          }
          return true;
        },

        setCellClassName: function (option) {
          if (!this.isEmphasize) {
            return;
          }

          var material = option.row;
          var column = option.column;
          var columnKey = column.columnKey;
          var classifyMaterialData = this.data.classifyMaterialData;
          if (classifyMaterialData.checkUpdate(columnKey, material)) {
            return 'has-update';
          }
          return;
        }
      },

      components: {
        ShowTextarea: ShowTextarea
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="material-setting" v-if="hasData">
      <div class="material-setting-btns" v-if="!isPrint">
        <el-button size="mini" type="primary" @click="toSettingConfig">配置</el-button>
      </div>
      <div class="material-setting-line" v-if="isLine"></div>
      <div class="material-setting-content" style="min-height:40px" v-if="isShow" :key="tableId">
        <div v-for="fieldList in materialFeildList" :key="fieldList.id" class="material-setting-row">
          <template v-for="(fieldObj,index) in fieldList.fields">
            <material-setting-item ref="materialItem" :key="fieldObj.id" :data="data" :config="fieldObj" :material-config="material"
              :is-print="isPrint" :is-emphasize="isEmphasize" :style="getItemStyle(index)">
            </material-setting-item>
          </template>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      config: {
        type: Object,
        required: true
      },
      data: Object
    },

    inject: {
      templProp: {
        default: function () {
          return {};
        }
      }
    },

    computed: {
      material: function () {
        return this.config.material;
      },
      mode: function () {
        return this.data.mode;
      },
      materialFeildList: function () {
        var material = this.material;
        return this.data.getClassifyMaterialFields(material);
      },
      itemWidthList: function () {
        var totalWidth = $('.order-template').width();
        var material = this.material;
        if (!material.isGroup) {
          return totalWidth;
        }

        var count = material.count;
        if (count === 1) {
          return [totalWidth];
        }

        var widthList = [];
        totalWidth += count - 1;
        var itemWidth = Math.floor(totalWidth / count);
        for (var i = 0; i < count; i++) {
          widthList.push(itemWidth)
        }
        var rangeWidth = totalWidth - itemWidth * count;
        if (rangeWidth > 0) {
          for (var i = 0; i < widthList.length; i++) {
            if (rangeWidth === 0) {
              break;
            }
            widthList[i] += 1;
            rangeWidth--;
          }
        }
        return widthList;
      },
      isPrint: function () {
        return this.templProp.isPrint;
      },
      isLine: function () {
        return this.templProp.isLine;
      },
      isEmphasize: function () {
        return this.templProp.isEmphasize;
      },
      hasData: function () {
        if (this.mode === 'test') {
          return true;
        }
        if (!this.isPrint) {
          return true;
        }
        var classifyMaterialData = this.data.classifyMaterialData;
        return classifyMaterialData.hasData();
      }
    },

    watch: {
      isPrint: function () {
        this.tableId = SysUtil.getId();
      }
    },

    data: function () {
      return {
        isShow: false,
        tableId: SysUtil.getId()
      };
    },

    mounted: function () {
      this.isShow = true;
    },

    methods: {
      toSettingConfig: function () {
        this.$emit('setting-config', {
          dialogTitle: '物料设置',
          dialogType: 'material'
        });
      },

      getItemStyle: function (index) {
        var material = this.material;
        if (!material.isGroup) {
          return {
            width: '100%'
          };
        }

        var itemWidthList = this.itemWidthList;
        var width = itemWidthList[index];
        return {
          width: width + 'px'
        };
      },

      checkValid: function () {
        var materialItems = this.$refs['materialItem'];
        if (materialItems === undefined) {
          return true;
        }

        for (var i = 0; i < materialItems.length; i++) {
          var materialItem = materialItems[i];
          if (!materialItem.checkValid()) {
            return false;
          }
        }
        return true;
      }
    },

    components: {
      MaterialSettingItem: MaterialSettingItem
    },

    template: template
  };
}();
